<template>
  <div class="table-wrapper  mt_14 pagination_bar">
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        height="100%"
        @selection-change="selectChange"
        style="width: 100%"
        id="dataTable">
        <el-table-column :type="type" :index="indexMethod" :width="50" label="序号" :selectable="selectable">
        </el-table-column>
        <template v-for="column in columns">
          <template v-if="!column.image">
            <el-table-column
              :key="column.prop"
              :fixed="column.fixed"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
              :sortable="column.sortable || false"
              :align="column.align || 'center'"
              :formatter="column.formatter || defaultFormatter">
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              :key="column.prop"
              :fixed="column.fixed"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
              :sortable="column.sortable || false"
              :align="column.align || 'center'"
              :formatter="column.formatter || defaultFormatter">
              <template slot-scope="scope">
                <img :src="src(scope, column)"  style="width:64px;height:64px; margin-top:8px;" alt="" @click="showImage(scope.row[column.prop])">
              </template>
            </el-table-column>
          </template>
        </template>

        <el-dialog :visible.sync="dialogVisible" width="50%" append-to-body>
          <img :src="imgUrl"  style="width:100%;height:100%; margin-top:8px;" alt="" >
        </el-dialog>

        <el-table-column v-if="buttons instanceof Array && buttons.length > 0" align="center" label="操作" :width="buttonWidth">
          <template slot-scope="scope">
            <el-dropdown @command="downClick">
              <span class="el-dropdown-link">
                操作按钮<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="button in buttons" :key="button.name" :command="button.name+'|'+scope.row.id+'|'+JSON.stringify(scope.row)" >{{button.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="pagination-container" >
      <el-pagination
        v-if='paginationStatus'
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[30, 50, 100, 200, 500]"
        :page-size="size"
        layout="total,sizes, prev, pager, next, jumper"
        :total="pagination.total_count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  export default{
    name:'pagination',
    data() {
      return {
        dialogVisible:false,
        currentPage: 1,
        size: 30,
        selected: [],
        selectedCell: [],
        imgUrl:''
      }
    },
    props:{
      tableData: {
        type: Array,
        default: [],
      },
      type: {
        type: String,
        default: 'selection',
      },
      columns: {
        type: Array,
        default: []
      },
      buttons: {
        type: Array,
        default: []
      },
      pagination: Object,
      batches: {
        type: Array,
        default: function() {
          return []
        }
      },
      buttonWidth: {
        type: [Number, String],
        default() {
          return ''
        }
      },
      selectable:{
        type:Function,
        default:function (row, index) {
          return true
        }
      },
      paginationStatus: {
        type:Boolean,
        default:function() {
          return true
        }
      }
    },
    created () {
      this.currentPage = parseInt(this.$route.query.page) || 1
      this.size = parseInt(this.$route.query.size) || 30
    },
    methods: {
      showImage(url) {
        this.dialogVisible = true
        this.imgUrl = url
      },
      downClick(command) {
        let list = command.split('|')
        this.buttons.map(y => {
          if(y.name == list[0]){
            y.operation(list[1], JSON.parse(list[2]), this)
          }
        })
      },
      src(scope, column) {
        let prop = column.prop
        let src = scope.row[prop]
        return src
      },
      selectChange(selections) {
        if (selections.length > 0) {
          this.selectedCell = []

          selections.forEach((selection, index) => {
            this.selectedCell.push(selection.id || index)
          })
        } else {
          this.selectedCell = []
        }

        this.$emit('update:batches', this.selectedCell)
      },
      handleSizeChange(size) {
        this.size = size
        this.emit()
      },
      handleCurrentChange(page) {
        this.currentPage = page
        this.emit()
      },
      emit() {
        let queryStr = JSON.stringify(this.$route.query)
        let params = Object.assign(JSON.parse(queryStr), {page: this.currentPage, size: this.size})
        this.$router.push({query: params})
      },
      defaultFormatter(row ,column, cellValue) {
        let needFormatColumns = ['createdAt', 'updatedAt', 'date']
        let key = column.property

        if (needFormatColumns.includes(key)) {
          return this.$timeFormat(row, column, cellValue)
        }

        return cellValue
      },
      indexMethod(index) {
        return this.tableData[index]['id'] || index + 1
      }
    },
    watch:{
      '$route' (newVal, oldVal) {
        this.currentPage = parseInt(this.$route.query.page) || 1
        this.size = parseInt(this.$route.query.size) || 30
      }
    }
  }
</script>

<style>
  .pagination-container {text-align: center; margin-top: 20px;}
</style>
